<template>
    <div class="vacaMaintain">
        <div class="ibox-title">
            <h5>假期管理</h5>
            <div class="ibox-tools">
                <!--<a  class="dh"><i class="fa fa-chevron-up"  v-on:click="toggle"></i></a>
                          
                          <a ><i class="fa fa-times"></i></a>-->
            </div>
        </div>
        <div class="ibox-centent">
            <div class="row">
                <div class="search">
                    <span>输入休假名称</span>
                    <el-input placeholder="请名称查询" v-model="leaveName" class="wi">
                    </el-input>
                    <span>选择年份</span>

                    <el-date-picker
                        v-model="years"
                        type="year"
                        value-format="yyyy"
                        format="yyyy"
                        @change="handleDate"
                        placeholder="选择年份">
                    </el-date-picker>
                    <span>选择区域</span>
            	    <el-select v-model="regionCheckSearch" placeholder="请选择">
					    <el-option
					      v-for="item in rigionArea"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
					  </el-select>
                    <el-button slot="append" @click="searchData">查询</el-button>
                </div>
                <div class="search">
                    <!--<a class="btn" :href="downloadUrl">
                        <i class="fa fa-external-link"></i>导出模版报表
                    </a>
                    <el-upload class="upload-con" :action="uploadUrl" :on-preview="handlePreview" :on-remove="handleRemove" :limit="1" :on-success="handleSuccess">
                        <el-button size="small" type="primary"><i class="fa fa-sign-in"></i>批量导入模版</el-button>
                    </el-upload>-->
                    <a class="btn" @click="add">
                        <i class="fa fa-plus"></i>新增
                    </a>
                    <a class="btn" @click="importLeave">
                        <i class="fa fa-plus"></i>假期导入
                    </a>
                </div>
                <div class="tt">
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column type="index" label="序号" min-width="40">
                            <template scope="scope">
                                <span>{{(currentPage-1)*pageSizeTable+(scope.$index+1)}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column property="region" label="区域" min-width="80">

                        </el-table-column>
                        <el-table-column property="leaveName" label="休假名称" min-width="80">

                        </el-table-column>
                        <el-table-column property="vacationDate" label="休假日期" min-width="100">
                        </el-table-column>
                        <el-table-column property="createName" label="创建人" width="80">
                        </el-table-column>
                        <el-table-column property="createDate" label="创建日期" min-width="70">
                        </el-table-column>                     
                        <el-table-column label="操作">
                            <template scope="scope">

                                <a class="modifyBtn" @click="modify(scope.row)">
                                    <i class="fa fa-edit"></i>修改
                                </a>
                                <span class="delete" @click="deletePeo(scope.row)" title="删除">
                                    <a >
                                        <i class="fa fa-remove"></i>
                                    </a>
                                </span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

            </div>

            <div class="block">
                <span class="displayShow">共 {{totalNum}} 条记录</span>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-sizes="[10,20,50,100, 200]" :page-size.sync="pageSizeTable" layout="sizes,prev, pager, next" :total="totalNum">

                </el-pagination>
            </div>

        </div>

        <el-dialog 
            title="确认上传"
            :fullscreen="full"
            size='large'
            :visible.sync="dialogTableVisible">
                <el-table :data="importData" style="width: 100%" height="500">
                    <el-table-column type="index" label="序号" min-width="40" >
                        <template scope="scope">
                            <span>{{(currentPage-1)*pageSizeTable+(scope.$index+1)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column property="name" label="姓名" min-width="80">

                    </el-table-column>
                    <el-table-column property="emplid" label="员工编号" min-width="100">
                    </el-table-column>
                    <el-table-column property="leaveType" label="假期类型" width="80">
                    </el-table-column>
                    <el-table-column property="years" label="年份" min-width="100">

                    </el-table-column>
                    <el-table-column  label="假期总天数" min-width="130">
                        <template scope="scope">
                            <el-input v-model="scope.row.sumDays"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column  label="假期剩余天数" min-width="130">
                        <template scope="scope">
                            <el-input v-model="scope.row.restDays"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column property="startDt" label="有效开始时间" min-width="130">
                        <template scope="scope">
                            <el-date-picker
                                v-model="scope.row.startDt"
                                type="date"
                                @change="handleUploadEndDt(scope,'startDt')"
                                placeholder="选择日期">
                            </el-date-picker>
                        </template>
                    </el-table-column>
                    <el-table-column property="endDt" label="有效结束时间" min-width="130">
                        <template scope="scope">
                            <el-date-picker
                                v-model="scope.row.endDt"
                                type="date"
                                @change="handleUploadEndDt(scope,'endDt')"
                                placeholder="选择日期">
                            </el-date-picker>
                        </template>
                    </el-table-column>
                    <el-table-column property="create_name" label="创建人">
                    </el-table-column>
                    <el-table-column property="remark" label="提示信息">
                        <template scope="scope">
                            <span :style="{'color':(scope.row.remark?'red':'')}">{{scope.row.remark ?scope.row.remark : '正常'  }}</span>
                        </template>
                    </el-table-column>  
                    <el-table-column property="" label="操作">
                        <template scope="scope">
                            <span class="delete" @click="DeleteImport(scope)" title="删除">
                                <a>
                                    <i class="fa fa-remove"></i>
                                </a>
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogTableVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmImport">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="新增" lock-scroll='false' class="addLeaveSelf" :visible.sync="dialogFormVisible" :lock-scroll=false>
            <el-form :model="form">
                <el-form-item label="休假名称" :label-width="formLabelWidth">
                    <!--<el-input v-model="form.leaveName" auto-complete="off"></el-input>-->
                      <el-select v-if="!nationLeaveSelfCheck" v-model="nationLeave" filterable placeholder="请选择">
					    <el-option
					      v-for="item in options"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
					  </el-select>
					  <el-input v-if="nationLeaveSelfCheck" v-model="nationLeaveSelf" auto-complete="off"></el-input>
					  <el-checkbox v-model="nationLeaveSelfCheck">自定义假期名称</el-checkbox>
                </el-form-item>
                <el-form-item label="区域" :label-width="formLabelWidth">
                	  <el-select v-model="regionCheck" placeholder="请选择">
					    <el-option
					      v-for="item in rigionArea"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
					  </el-select>
                    <!--<select class="select"  v-model="form.region" placeholder="请选择区域">
                        <option label="内地" value="1">内地</option>
                        <option label="香港" value="2">香港</option>  
                    </select>-->
                </el-form-item>

                <el-form-item label="选择录入节假日"  :label-width="formLabelWidth">
                    <el-date-picker
       
                	  :editable='addEdit'
				      v-model="form.addDataRange"
				      type="daterange"
				      placeholder="选择日期范围">
				    </el-date-picker>
                </el-form-item>
                <!--<el-form-item label="假期类型" :label-width="formLabelWidth">
                    <el-input v-model="form.name" auto-complete="off"></el-input>
                </el-form-item>-->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmAdd">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="导入假期" lock-scroll='false' :visible.sync="dialogImportVisible" :lock-scroll=false>
            <el-form :model="form">
                <el-form-item label="休假年份" :label-width="formLabelWidth">
                	<el-date-picker
                        v-model="importDefaultYear"
                        type="year"
                        value-format="yyyy"
                        format="yyyy"
                        @change="handleImportDate"
                        placeholder="选择年份">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="区域" :label-width="formLabelWidth">
                	
                	  <el-select v-model="importRegion" style="width:120px;" placeholder="请选择">
					    <el-option
					      v-for="item in rigionArea"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
					  </el-select>
                    <!--<select class="select" style="width:120px;" v-model="importRegion" placeholder="请选择区域">
                        <option label="内地" value="1">内地</option>
                        <option label="香港" value="2">香港</option>  
                    </select>-->
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogImportVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmImport">确 定导入</el-button>
            </div>
        </el-dialog>


        <el-dialog title="修改" lock-scroll='false' :visible.sync="dialogModifyVisible" :lock-scroll=false>
            <el-form :model="modifyForm">
                <el-form-item label="休假名称" :label-width="formLabelWidth">
                    <el-input v-model="modifyForm.leaveName" auto-complete="off"></el-input>
                </el-form-item>
                <!--<el-form-item label="休假编号" :label-width="formLabelWidth">
                    <el-input v-model="modifyForm.id" auto-complete="off"></el-input>
                </el-form-item>-->
                <el-form-item label="区域" :label-width="formLabelWidth">
                    <select class="select" v-model="modifyForm.region" disabled placeholder="请选择区域">
                        <option label="内地" value="内地">内地</option>
                        <option label="香港" value="香港">香港</option>           
                    </select>
                </el-form-item>

                <el-form-item label="假期天数" :label-width="formLabelWidth">
            		<el-date-picker
            			:editable='addEdit'
                        v-model="modifyForm.vacationDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        @change="handleModifyDate"
                        placeholder="选择年份">
                    </el-date-picker>
                    <!--<el-input v-model="modifyForm.vacationDate"  auto-complete="off"></el-input>-->
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogModifyVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmModify">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
//import 'Mock/mock_data'
import Vue from 'vue'
import {
	Input,
	Table,
	TableColumn,
	Upload,
	Tag,
	Pagination,
	Dialog,
	Form,
	FormItem,
	Select,
	Option,
	DatePicker,
	MessageBox,
	Checkbox,
	Message,
} from 'element-ui'

// Select,
// Option,
Vue.use(Input)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Upload)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(DatePicker)
Vue.use(Select)
Vue.use(Option)
Vue.use(Checkbox)


// import cardLeader from "@/components/card-leader";
// import searchBox from "@/components/search-box";
// import adminUrl from "@/common/js/adminUrl";
// import CxoDialog from "@/components/userManager/dialog/CxoDialog";
// import BusinessDialog from "@/components/userManager/dialog/BusinessDialog";
// import DepartmentDialog from "@/components/userManager/dialog/DepartmentDialog";
// import HeadquartersDialog from "@/components/userManager/dialog/HeadquartersDialog";
// import RoleDialog from "@/components/userManager/dialog/RoleDialog";
export default {
	components: {
		// CxoDialog,
		// BusinessDialog,
		// DepartmentDialog,
		// HeadquartersDialog,
		// RoleDialog
	},
	data() {
		return {

	        options: [{
	          value: '',
	          label: '请选择'
	        },{
	          value: '春节',
	          label: '春节'
	        }, {
	          value: '国庆节',
	          label: '国庆节'
	        }, {
	          value: '清明节',
	          label: '清明节'
	        }, {
	          value: '端午节',
	          label: '端午节'
	        }, {
	          value: '中秋节',
	          label: '中秋节'
	        }, {
	          value: '元旦节',
	          label: '元旦节'
	        }, {
	          value: '劳动节',
	          label: '劳动节'
	        }, {
	          value: '周末',
	          label: '周末'
	        }],
	        nationLeave: '',
			nationLeaveSelfCheck:false,
			nationLeaveSelf:'',
			
			rigionArea:[{
	          value: '1',
	          label: '内地'
	        }, {
	          value: '2',
	          label: '香港'
	        }],
			regionCheck:'1',
			regionCheckSearch:'1',
			tableData: [],
			currentPage: 1,
			pageSizeTable: 20,
			totalNum: 0,
			leaveName: '',
			years: '',//new Date().getFullYear().toString()
			yearsList: ['2016', '2017'],

			//数据导入start
			dialogTableVisible:false,
			importData:[],
			date:'2017-11-20',
			full:true,

			//数据导入end

			//创建 start
			dialogFormVisible:false,
			form: {
				leaveName: '',
				region: '1',
				id: '',
				addDataRange: [],
			},
			modifyForm:{},
			addEdit:false,
			formLabelWidth: '120px',
			//创建 end

			dialogModifyVisible:false,
            
            
			dialogImportVisible:false,
			importDefaultYear:new Date().getFullYear().toString(),
			importDefaultYearLeave:new Date().getFullYear().toString(),
			importRegion:'1',
		}
	},
	computed: {
		downloadUrl: function() {
			return this.Axios.baseURI + this.URL.exportLeaveManager.url +'?token='+localStorage.getItem('token')
		},
		uploadUrl: function() {
			return this.Axios.baseURI + this.URL.leaveManagerImport.url
		},

	},
	mounted: function() {
		this.getLeaveList()
	},
	methods: {
		// type===2 代表简表请求
		handleSizeChange(val) {
			this.currentPage=1
			this.pageSizeTable = val
			this.getLeaveList()
			// this.getLeaderListCommonAjax(2);            
		},
		handleCurrentChange(val) {
			// console.log(this.currentPage);
			this.currentPage = val
			this.getLeaveList()
			// this.getLeaderListCommonAjax(2); 
		},


		//查询start

		clearData:function(){
			this.currentPage=1
		},
		searchData:function(){
			this.clearData()
			this.getLeaveList()
		},
		handleDate:function(val){
			this.years = val
			console.log(val)
		},
		//查询end

		//新增
		clearAddData:function(){
        	
		},
		confirmAdd:function(){
			this.postAddAjax(this.URL.editLeaveaMaintain.url).then(res=>{
				if (res.data.status === 1){
					//                  this.dialogFormVisible = false;
		        	this.nationLeave=''
		        	this.regionCheck='1'
		        	this.form.addDataRange = []
		        	this.getLeaveList()	        	
                    
					Message({
						message: res.data.message,
						type: 'success'
					})
					setTimeout(function(){
			     		MessageBox.confirm('是否继续新增, 是否继续?', '确认', {
			                confirmButtonText: '确定',
			                cancelButtonText: '取消',
			                type: 'warning'
			                }).then(() => {
								
			                }).catch(() => {
							this.dialogFormVisible = false
			                })
					},1000)                    
                    
                    
				}
			})
		},
		formatDate : function (date) {
			if (!date) {
				return
			} else if (date instanceof Date) {
			    var y = date.getFullYear()  
			    var m = date.getMonth() + 1  
			    m = m < 10 ? '0' + m : m  
			    var d = date.getDate()  
			    d = d < 10 ? ('0' + d) : d  
			    return y + '-' + m + '-' + d  
			} else {
				return date
			}

		},  
		GetDateDiff:function (startDate,endDate) {  
		    var startTime = new Date(Date.parse(startDate.replace(/-/g,   '/'))).getTime()     
		    var endTime = new Date(Date.parse(endDate.replace(/-/g,   '/'))).getTime()     
		    var dates = Math.abs((startTime - endTime))/(1000*60*60*24)     
		    return  dates    
		},
		getDate: function (year, month){
		    var d = new Date(year, month, 0)
		    return d.getDate()
		},
		postAddAjax:function(url,params){
        	

        	if (!this.form.addDataRange) {
				Message({
					message: '请输入时间',
					type: 'warning'
				}) 
				return
        	}
        	
        	var leaveDays=[]
        	this.form.addDataRange.forEach((val,index,arr) => {
        		leaveDays.push(this.formatDate(val))
        	})
        	       	
        	var sentLeaveDays = []
        	
        	
        	
        	var startDate = leaveDays[0]
        	var startStr = startDate.substring(0,(leaveDays[0].lastIndexOf('-')))
        	var startNum = startDate.substr((leaveDays[0].lastIndexOf('-')+1),2) - 0
        	var endDate = leaveDays[1]
        	var endStr = endDate.substring(0,(leaveDays[0].lastIndexOf('-')))
        	
        	if (startStr === endStr) {//判断同月
        		sentLeaveDays.push(startDate)
	           	for (var i=0,len=this.GetDateDiff(leaveDays[0],leaveDays[1]);i<len;i++) {
	        		sentLeaveDays.push(startStr+'-'+(startNum+i+1 > 9 ? startNum+i+1 : '0'+(startNum+i+1)))
	        	}     		
        	} else {//判断跨月
   
        		var startMonth = startStr.substr((startStr.lastIndexOf('-')+1),2) - 0
        		var startYear = startStr.substr(0,4)
        		var endNum = endDate.substr((endDate.lastIndexOf('-')+1),2) - 0
        		var days = this.getDate(startYear,startMonth)
  
	           	for (var i=0;i<len;i++) {
	        		sentLeaveDays.push(startStr+'-'+(startNum+i+1 > 9 ? startNum+i+1 : '0'+(startNum+i+1)))
	        	}        			
        		while(startNum <= days){
        			sentLeaveDays.push(startStr+'-'+(startNum > 9 ? startNum : '0'+startNum))
        			startNum++
        		}
        		
        		var endStart = 1
        		while(endStart <= endNum){
        			sentLeaveDays.push(endStr+'-'+(endStart > 9 ? endStart : '0'+endStart))
        			endStart++        			
        		}
        		

        	}	
        	
        	var leaveName 
        	if (!this.nationLeaveSelfCheck) {
        		leaveName = this.nationLeave
	        	if (!this.nationLeave) {
	                Message({
	                    message: '请输入假期名',
	                    type: 'warning'
	                }) 
	                return
	        	}
        	
        	} else {
        		leaveName = this.nationLeaveSelf
	        	if (!this.nationLeaveSelf) {
	                Message({
	                    message: '请输入自定义假期名',
	                    type: 'warning'
	                }) 
	                return
	        	}
        	}
        	
			var params = {
				regionType:this.regionCheck,
				leaveName:leaveName,
				vacationDates:sentLeaveDays
			}
			//			console.log(params);
			return this.Axios.Post(url,params)
            
		},
		handleModifyDate:function(){
        	
		},
		//

		//
		deletePeo:function(row){
			console.log(row,'row')
			this.deleteAjax(row.id)
		},
		deleteAjax:function(id){
			var params={
				isEnable:0,
				id:id
			}
   
     		MessageBox.confirm('是否删除?', '提示', {
	            confirmButtonText: '确定',
	            cancelButtonText: '取消',
	            type: 'warning'
			}).then(() => {
	            this.postAjax(this.URL.deleteMaintainById.url,params)
	                .then(res=>{
	                    if (res.data.status === 1){
	                        Message({
	                            message: res.data.message,
	                            type: 'success'
	                        })
	                        this.getLeaveList()
	                    }
	                })
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消导入'
				})          
			})
		},
		//

		//修改
		modify:function(row){
			console.log(row)
			this.modifyForm = row
			this.dialogModifyVisible = true
		},
		handleYearModi:function(val){
			console.log(val)
			this.modifyForm.years = val
		},
		handleDateModiEnd:function(val){
			console.log(val)
			this.modifyForm.end_dt = val
		},
		handleDateModiStart:function(val){
			console.log(val)
			this.modifyForm.start_dt = val
		},
		testVacationDate:function(date){
			if (!date) {
				return ''
			} else if (date instanceof Date) {
			    var y = date.getFullYear()  
			    var m = date.getMonth() + 1  
			    m = m < 10 ? '0' + m : m  
			    var d = date.getDate()  
			    d = d < 10 ? ('0' + d) : d  
			    return y + '-' + m + '-' + d  
			} else {
				return date
			}
		},
		confirmModify:function(){
        	
        	
			var params = {
				regionType:(this.modifyForm.region ==='内地'?'1':'2'),
				leaveName:this.modifyForm.leaveName,
				id:this.modifyForm.id,
				vacationDate:this.testVacationDate(this.modifyForm.vacationDate),
			}
        
			if (!this.modifyForm.leaveName) {
				Message({
					message: '请输入假期名',
					type: 'success'
				})       	
			}
			this.postAjax(this.URL.editLeaveaMaintain.url,params)
				.then(res=>{
					this.dialogModifyVisible = false
					this.getLeaveList()
					if (res.data.status === 1){
						Message({
							message: res.data.message,
							type: 'success'
						})
					}                   
				})
		},
		//

		//导入
		confirmImport:function(){
			var params = {
            	regionType:this.importRegion,
            	years:this.importDefaultYearLeave,
			}
			MessageBox.confirm('是否导入假期?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.postAjax(this.URL.addMaintainByweeks.url,params)
					.then(res=>{
						this.dialogTableVisible = false
						this.getLeaveList()
						if (res.data.status == 1){
							Message({
								message: res.data.message,
								type: 'success'
							})
                                
						}                   
					})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消导入'
				})          
			})

		},
		handleImportDate:function(val){
        	this.importDefaultYearLeave = val
        	console.log(val)
		},
		//


		postAjax: function(url, params) {
			return this.Axios.Post(url, params)
		},
		getLeaveList: function() {
			var params = {
				regionType:this.regionCheckSearch,
				years:this.years,
				pageNum: this.currentPage,
				pageSize: this.pageSizeTable,
				leaveName: this.leaveName
			}
			this.postAjax(this.URL.getLeaveaMaintainBylist.url, params)
				.then(res => {
					this.tableData = res.data.datas
					this.totalNum = res.data.total
				})
		},
		confirmSubmit:function(){

		},
		add:function(){
        	this.nationLeave=''
        	this.regionCheck='1'
        	this.form.addDataRange = []
			this.dialogFormVisible = true
			this.nationLeaveSelfCheck = false
			this.nationLeaveSelf = ''
		},
		importLeave:function(){
        	
			this.dialogImportVisible = true
		},
		handleRemove(file, fileList) {
			console.log(file, fileList)
		},
		handlePreview(file) {
			console.log(file)
		},
		handleSuccess(response, files, fileList) {
			console.log(response,'handleSuccess')
            
			this.importData = response.datas
			this.dialogTableVisible = true
		},
		handleUploadEndDt:function(val,type){
			if (!val.row[type]){return} 
			console.log(val.row.endDt)
			var date = new Date(val.row[type])
			var year = date.getFullYear()
			var Month = date.getMonth()>9 ?date.getMonth()+1 : '0'+(date.getMonth()+1)
			var date = date.getDate()>9 ? date.getDate() : '0'+date.getDate()
			this.importData[val.$index][type] = year + '-' + Month + '-' + date
		},
		DeleteImport:function(scope){
			this.importData.splice(scope.$index,1)
		}

	},

	beforeDestroy: function() {

	}
}
</script>

<style scoped>
.vacaMaintain .dialog {
    background-color: #fff;
    padding: 100px;
}


.vacaMaintain .first-title h3 {
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: 500;
    line-height: 1.1;
}
.vacaMaintain .select{
    height: 36px;
    width: 100%;
    border: 1px solid #bfcbd9;
}
.vacaMaintain .second-sec {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #d2d6de;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    border-top-color: #00a65a;
}

.deg-contain {
    border: 1px solid #8391a5;
    min-height: 60px;
    border-radius: 6px;
}

.content-right {
    float: right;
    margin-top: 17px;
}

.vacaMaintain .select-dept {
    font-size: 14px;
}

.vacaMaintain .display-title {
    border-bottom: 1px solid #f4f4f4;
    padding: 10px;
}

.vacaMaintain .switch-btn {
    padding: 10px 10px;
}

.vacaMaintain .collapse-card {
    padding: 10px 10px;
    border-bottom: 1px solid #f4f4f4;
}

.vacaMaintain .third-card {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #3c8dbc;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.vacaMaintain .third-card .collapse-card .box-title {
    display: inline-block;
    font-size: 18px;
    color: #444;
    font-weight: 500;
    margin: 0;
    line-height: 1;
}

.vacaMaintain .third-card .collapse-card .box-title .box-header>.box-tools {
    position: absolute;
    right: 10px;
    top: 5px;
}

.vacaMaintain .third-card .collapse-card .collapse {
    border-radius: 3px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid transparent;
    padding: 5px;
    font-size: 12px;
    background: transparent;
    color: #97a0b3;
}




/*content*/

vacaMaintain {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
}

.ibox-title {
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 2px 0 0;
    color: inherit;
    margin-bottom: 0;
    color: #6c6a6c;
    padding: 15px 15px 7px;
    min-height: 48px;
}

.ibox-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0 0 7px;
    padding: 0;
    text-overflow: ellipsis;
    float: left;
}

.ibox-tools {
    display: block;
    float: none;
    margin-top: 0;
    position: relative;
    padding: 0;
    text-align: right;
}

.ibox-tools a {
    cursor: pointer;
    margin-left: 5px;
    color: #c4c4c4;
}




/*ibox-centent*/

.ibox-centent {
    padding: 20px 10px 40px;
    clear: both;
    background-color: #ffffff;
    color: inherit;
    min-height: 500px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0;
}

.row {
    margin-right: -10px;
    margin-left: -10px;
}

.row .tt {
    padding: 0 30px;
}

.row .search {
    width: 100%;
    margin-bottom: 15px;
    height:44px;
    line-height:44px;
    padding-left: 12px;
    padding-right: 12px;
}

.row .search span {
    margin: auto 5px;
}

.row .search button {
    margin: auto 5px;
}

.row .search .btn {

    height: 34px;
    line-height: 34px;
    text-align: center;
    color: #fff;
    display: inline-block;
    background-color: #18a689;
    border-radius: 5px;
    padding: 5px;
    min-width: 60px;
    margin-left:5px;
}
.modifyBtn {

    height: 24px;
    line-height: 24px;
    text-align: center;
    color: #fff;
    display: inline-block;
    background-color: #18a689;
    border-radius: 5px;
    padding: 4px;
}

.row .search .btn i {

    margin-right: 2px;
}

.row .search .btn:first-child {
    margin-left: 20px;
}

.row .search .btn:hover {
    background-color: #ccc;
    color: #000;
    cursor: pointer;
}

.row .search .wi {
    width: 20%;
}

.el-button {
    background: #1ab394;
    border: 1px solid #1ab394;
    color: #fff;
}

.search-l {
    width: 33.3333333%;
    margin-bottom: 5px;
}

.el-button .r {
    width: 66.66666667%;
}

.el-input-group__append .el-button {
    background: #1ab394;
    color: #fff;
    border: 1px solid #1ab394;
}




/*table*/

.el-table__header-wrapper thead div {
    background-color: #fff;
    color: #1f2d3d;
}

.btn-sp {
    padding-left: -10px;
}

.btn-sp>a {
    border: 1px solid #23c6c8;
    background: #23c6c8;
    color: #fff;
    border-radius: 3px;
    padding: 2px 9px;
    font-size: 12px;
    display: inline-block;
    margin-top: 5px;
}

.opt-btn-sp>a {
    border: 1px solid #18a689;
    background: #18a689;
    color: #fff;
    border-radius: 3px;
    padding: 2px 9px;
    font-size: 12px;
    display: inline-block;
    margin-top: 5px;
}

.delete>a {
    border: 1px solid #ec4758;
    background: #ec4758;
    color: #fff;
    border-radius: 3px;
    padding: 2px 9px;
    font-size: 12px;
    display: inline-block;
    margin-top: 5px;
}

.el-pagination {
    margin-top: 20px;
}




/*角色授权*/

.modal-content {
    background-clip: padding-box;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    outline: 0 none;
    position: relative;
}

.modal-header .close {
    margin-top: -2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.close {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: black;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: 0.2;
}

.modal-title {
    margin: 0;
    line-height: 1.42857143;
}

.modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
    font-weight: 600;
    font-size: 14px;
}

.modal-body {
    padding: 20px 30px 30px 30px;
    position: relative;
}

.el-dialog__body {
    color: #48576a;
}

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

ul,
ol {
    margin-top: 0;
    margin-bottom: 10px;
}

input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 4px 0 0;
}

.input {
    border: none;
}

.input:focus {
    border: none;
    outline: none;
}

.title-modify {
    height: 40px;
    line-height: 40px;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
}

.modal-footer {
    margin-top: 0;
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}

.btn-primary {
    background-color: #1ab394;
    border-color: #1ab394;
    color: #ffffff;
    padding: 8px 13px;
    border-radius: 3px;
    border: 1px solid #1ab394;
    outline: none;
    cursor: pointer;
    font-size: 14px;
}

.modal-footer .btn+.btn {
    margin-bottom: 0;
    margin-left: 5px;
    color: inherit;
    background: white;
    border: 1px solid #e7eaec;
    padding: 8px 13px;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    font-size: 14px;
}




/* .btn-default {
    color: inherit;
    background: white;
    border: 1px solid #e7eaec;
} */

.glyphicon {
    position: relative;
    top: 3px;
    display: inline-block;
    font-family: "Glyphicons Halflings";
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}




/*图标*/

.glyphicon-off:before {
    content: "\e017";
}

.vacaMaintain .displayShow {
    display: inline-block;
    height: 32px;
}

.vacaMaintain .block {
    margin: 15px 5px;
    line-height: 32px;
}

.vacaMaintain .block>div {
    display: inline-block;
}
</style>
<style>
/*修改element-ui样式*/

.vacaMaintain .el-radio-button__inner:hover {
    color: #333;
}

.vacaMaintain .el-radio-group .el-radio-button__inner:hover {
    background-color: #e7e7e7;
}

.vacaMaintain .el-radio-group .el-radio-button__inner {
    background-color: #f4f4f4;
}

.vacaMaintain .el-radio-group .is-active .el-radio-button__inner:hover {
    background-color: #d4d4d4 !important;
}




/*i*/

.vacaMaintain .el-menu--collapse>.el-submenu>.el-submenu__title [class^="el-icon-"] {
    margin: 0;
    vertical-align: middle;
    width: 14px;
    text-align: center;
}

.vacaMaintain .el-input-group--append .el-input__inner,
.vacaMaintain .el-input-group__prepend {
    border-width: 1px 0px 1px 1px;
}

.vacaMaintain .el-input-group__append .el-button[data-v-4fefba28] {
    border: 1px solid #1ab394;
    border-radius: 0px 3px 3px 0px;
    line-height: 0.99;
}




/*table*/

.vacaMaintain .el-table {
    border: none !important;
}

.vacaMaintain .el-table th {
    background: #fff !important;
    height: 52px !important;
    vertical-align: left !important;
}

.vacaMaintain .el-table__footer-wrapper thead div,
.vacaMaintain .el-table__header-wrapper thead div {
    background: #fff !important;
    border-right: none;
}

.vacaMaintain .el-table .cell {
    padding: 10px;
    cursor: pointer;
}

.vacaMaintain .el-table .cell>div {
    text-align: center;
}

.vacaMaintain .el-table__body-wrapper {
    overflow: auto;
}

.vacaMaintain .el-table .cell,
.vacaMaintain .el-table th>div {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.vacaMaintain .ibox-tools dh {
    background: red;
    display: inline-block;
}

.vacaMaintain .el-tag--success {
    margin-top: 3px;
}



.vacaMaintain .btn-primary:hover,
.vacaMaintain .btn-primary:focus {
    background-color: #18a689 !important;
}

.vacaMaintain .btn-default:hover {
    background-color: #e6e6e6 !important;
    cursor: pointer;
    border: 1px solid #d2d2d2 !important;
}

.vacaMaintain .el-form .el-form-item {
    width: 80%;
}

.vacaMaintain .addLeaveSelf .el-form .el-select {
    width: 60%;
}
.vacaMaintain .addLeaveSelf .el-form .el-select .el-input{
    width: 100%;
}
.vacaMaintain .addLeaveSelf .el-form .el-input{
    width: 60%;
}

.vacaMaintain .el-table__empty-block {
    width: 100% !important;
}
.vacaMaintain .el-table::after{
    width:0px;
}
.vacaMaintain .upload-con {
    display:inline-block;
    vertical-align:top;
    width:120px;
    height:44px;
    overflow: hidden;
}
.vacaMaintain .upload-con button{
    display:inline-block;
    height:44px;
    line-height:44px;
    text-align:center;
    vertical-align:top;
    font-size:14px;
}
.vacaMaintain .upload-con button span{
    display:inline-block;
    height:28px;
    line-height:28px;
    text-align:center;
    vertical-align:top;
    font-size:14px;
}
.vacaMaintain .el-table__header {
    width: 100% !important;
}
.vacaMaintain .addLeaveSelf .el-date-editor.el-input{
    width:60%;
}

</style>
